<template>
    <div class="M-nav">
        <div @click="go(item)" class='item' v-for="item in items" :key="item.name" :data-icon="item.name" :class="{'act': cur==item.name}">
            {{ item.text }}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        items: {
            type: Array,
            default: function () {
                return [
                    {
                        text: "首页",
                        name: "index",
                    },
                    {
                        text: "分类",
                        name: "cates",
                    },
                    {
                        text: "购物车",
                        name: "cart",
                    },
                    {
                        text: "我的",
                        name: "user",
                    },
                ];
            },
        },
        cur: String
    },
    methods: {
        go(item){
            this.$router.push({name: item.name})
        }  
    }
};
</script>
<style lang="less">
@import '@/components/common/var.less';
.M-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    border-top: 1px solid @btnColor;
    .item {
        flex: 1;
        line-height: @navH;
        height: @navH;
        color: #818181;
        text-align: center;
        &.act{
            color: @btnColor;
        }
    }
}
</style>